<template>
  <div>
    <span v-if="prop != 'operate'">{{ row[prop] }}</span>
    <div v-if="prop == 'operate'">
      <el-button
        v-for="(item, i) in row.operate.content"
        :key="i"
        v-on:[eventName]="handleClick(item.click, row)"
        :type="item.type"
        :size="item.size"
        >{{ item.name }}</el-button
      >
    </div>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
export default {
  name: "cell",
  props: {
    prop: String,
    row: Object,
  },
  mounted(){
  },
  setup() {
    // 点击事件名称
    const eventName = ref('click');

    const handleAdd = (item) => {
      console.log(item)
      alert('Add');
    };
    const handleEdit = () => {
      alert('edit');
    }
    const handleDelete = () => {
      alert('delete');
    }

    const fn = {
      handleAdd,
      handleEdit,
      handleDelete
    }
    const handleClick = (name, item) => {
      fn[`handle${name}`](item);
    };


    return {
      fn,
      eventName,
      handleClick,
      handleEdit,
      handleDelete,
      handleAdd,
    }
  }
};
</script>
